<template>
	<view class="page">
		<!-- 顶部 -->
		<view class="topVue">
			<view class="status"></view>
			<view class="header flex-between align-center padding-row30">
				<text>AI助手</text>
				<!-- <view class="flex align-center">
					<image src="../../static/index/order_1.png" style="width: 40rpx;height: 40rpx;"></image>
					<view class="point">2580</view>
				</view> -->
			</view>
		</view>
		
		<view class="place"></view>
		
		<!-- banner -->
		<view class="banner margin0 flex-between">
			<view class="li padding30 flex-column" @click="$u.toast('功能暂未开发')">
				<image src="../../static/ai/chat.png" style="width: 78rpx; height: 78rpx;"></image>
				<view class="flex-1"></view>
				<text style="color: #fff; font-weight: 600; font-size: 32rpx;">AI对话</text>
				<text style="color: rgba(255, 255, 255, 0.8); font-weight: 600; ">智能问答助手</text>
			</view>
			<view class="li padding30 flex-column" @click="$u.toast('功能暂未开发')">
				<image src="../../static/ai/mental.png" style="width: 78rpx; height: 78rpx;"></image>
				<view class="flex-1"></view>
				<text style="color: #fff; font-weight: 600; font-size: 32rpx;">心理咨询</text>
				<text style="color: rgba(255, 255, 255, 0.8); font-weight: 600; ">AI心理辅导</text>
			</view>
		</view>
		
		<!-- menu -->
		<view class="menuVue margin30 flex-wrap flex-between">
			<view class="li flex-column flex-between" @click="$u.toast('功能暂未开发')">
				<image src="../../static/ai/ai_1.png" style="width: 52rpx; height: 52rpx;"></image>
				<text style="font-weight: 600; line-height: 1;">产品咨询</text>
				<text style="color: #666; line-height: 1;">50积分/次</text>
			</view>
			<view class="li flex-column flex-between" @click="$u.toast('功能暂未开发')">
				<image src="../../static/ai/ai_2.png" style="width: 52rpx; height: 52rpx;"></image>
				<text style="font-weight: 600; line-height: 1;">合同生成</text>
				<text style="color: #666; line-height: 1;">100积分/次</text>
			</view>
			<view class="li flex-column flex-between" @click="$u.toast('功能暂未开发')">
				<image src="../../static/ai/ai_3.png" style="width: 52rpx; height: 52rpx;"></image>
				<text style="font-weight: 600; line-height: 1;">文案创作</text>
				<text style="color: #666; line-height: 1;">80积分/次</text>
			</view>
			<view class="li flex-column flex-between" @click="$u.toast('功能暂未开发')">
				<image src="../../static/ai/ai_4.png" style="width: 52rpx; height: 52rpx;"></image>
				<text style="font-weight: 600; line-height: 1;">心理辅导</text>
				<text style="color: #666; line-height: 1;">150积分/次</text>
			</view>
			<view class="li flex-column flex-between" @click="$u.toast('功能暂未开发')">
				<image src="../../static/ai/ai_5.png" style="width: 52rpx; height: 52rpx;"></image>
				<text style="font-weight: 600; line-height: 1;">AI恋爱顾问</text>
				<text style="color: #666; line-height: 1;">50积分/次</text>
			</view>
			<view class="li flex-column flex-between" @click="$u.toast('功能暂未开发')">
				<image src="../../static/ai/ai_6.png" style="width: 52rpx; height: 52rpx;"></image>
				<text style="font-weight: 600; line-height: 1;">更多服务</text>
				<text style="color: #666; line-height: 1;">敬请期待</text>
			</view>
		</view>
		
		<!-- hot -->
		<!-- <view class="hotVue margin30">
			<view class="flex-between align-center">
				<view class="label">热门服务</view>
			</view>
			<view class="li flex align-center padding20" v-for="(item, index) in 5" :key="index">
				<view class="icon">
					<image src="../../static/bg.png" style="width: 100%; height: 100%; border-radius: 15rpx;"></image>
				</view>
				<view class="flex-1 flex-column padding-row20">
					<view class="name">AI情感分析</view>
					<view class="desci">深度解析您的情感困惑</view>
					<view class="flex-between align-center">
						<view class="flex align-center">
							<u-icon name="star" color="#FAD131" size="28"></u-icon>
							<text style="line-height: 1; color: #666; padding-left: 5rpx;">4.5</text>
						</view>
						<view class="flex align-center">
							<u-icon name="star" color="#1CC289" size="28"></u-icon>
							<text style="line-height: 1; color: #1CC289; padding-left: 5rpx;">80积分</text>
						</view>
					</view>
				</view>
			</view>
		</view> -->
	</view>
</template>

<script>
	export default { 
		data(){
			return {
				
			}
		}
	}
</script>

<style lang="less" scoped>
	.place {
		width: 100%;
		height: calc(var(--status-bar-height) + 92rpx);
	}
	.topVue {
		width: 100%;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 99;
		background: #fff;
		.header {
			width: 100%;
			height: 92rpx;
			text {
				font-size: 30rpx;
				color: #000;
				font-weight: 600;
			}
			.point {
				font-weight: 600;
				color: #1CC289;
				padding-left: 10rpx;
			}
		}
	}
	
	.banner {
		width: 690rpx;
		height: 330rpx;
		.li {
			width: 330rpx;
			height: 330rpx;
			background: linear-gradient(45deg, #1CC289, #60A5FA,);
			border-radius: 30rpx;
		}
	}
	
	.menuVue {
		width: 690rpx;
		.li {
			width: 330rpx;
			height: 200rpx;
			margin-bottom: 30rpx;
			background: #fff;
			border-radius: 15rpx;
			padding: 25rpx;
			box-shadow: 0rpx 0rpx 16rpx 0rpx rgba(178, 178, 178, 0.25), inset 0rpx 8rpx 8rpx 0rpx rgba(255, 255, 255, 0.25);
		}
	}

	.hotVue {
		width: 690rpx;
		.label {
			color: #000;
			font-weight: 600;
		}
		.li {
			width: 100%;
			height: 160rpx;
			background: #f5f5f5;
			margin-top: 20rpx;
			border-radius: 15rpx;
			.icon {
				width: 88rpx;
				height: 88rpx;
				border-radius: 16rpx;
			}
			.name {
				font-weight: 600;
				line-height: 1;
			}
			.desci {
				color: #666;
				line-height: 1;
				padding: 15rpx 0;
			}
		}
	}
</style>